<script>
export default {
	name: "AppLink",
};
</script>
<script setup>
import { RouterLink } from "vue-router";
import { computed } from "vue";

const props = defineProps({
	...RouterLink.props,
	inactiveClass: String,
});

const isExternalLink = computed(() => typeof props.to === "string" && props.to.startsWith("http"));
</script>
<template>
	<template>
		<a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
			<slot />
		</a>
		<router-link v-else v-bind="$props" custom v-slot="{ isActive, href, navigate }">
			<a v-bind="$attrs" :href="href" @click="navigate" :class="isActive ? activeClass : inactiveClass"> <slot /> </a
		></router-link>
	</template>
</template>
